import logins from '../apis/login'
import '../static/css/style.css'
import '../static/css/App.css'
import '../static/css/font-awesome.min.css'
import { FC, useEffect,useState} from 'react'
import { useNavigate} from 'react-router'
import { message, } from 'antd'
// 定义接口规范
interface User {
    admin_name: string
    pwd: string
}
const Login: FC<any> = (data: any): JSX.Element => {
    
    const [user,setuser] = useState<User>({admin_name:'',pwd:''})
    // 获取账号
    const nameChange = (e:any)=>{
        setuser({...user,admin_name:e.target.value})
    }
    // 获取密码
    const pwdChange = (e:any)=>{
        setuser({...user,pwd:e.target.value})
    }
    // 登录
    
    const navigate = useNavigate()
    const login =async ()=>{
       const res:any = await logins(user)
       if(res.code==='00000'){
            message.success('登录成功', 2);
            sessionStorage.setItem('token',res.token)
            navigate('/index')
       }else {
        message.error(`${res.msg}`, 2);
       }
    }
    const onKeyup=(e:any)=> {
        if(e.keyCode === 13) {
            login()
        }
    }
    
    useEffect(() => {
    }, [user])
    return (
        <section className="main">
            <div className="bottom-grid">
                <div className="logo">
                    <h1> <a>北京科技经营管理学院</a></h1>
                </div>
            </div>
            <div className="content-w3ls">
                <div className="text-center icon">
                    <span className='huan'>欢迎登陆</span>
                </div>

                <div className="content-bottom">
                    <form action="#" method="post">
                        <div className="field-group">
                            <span className="fa fa-user" aria-hidden="true"></span>
                            <div className="wthree-field">
                                <input name="text1" id="text1" type="text"  placeholder="Account" required value={user.admin_name} onChange={nameChange} onKeyUp={onKeyup}/>
                            </div>
                        </div>
                        <div className="field-group">
                            <span className="fa fa-lock" aria-hidden="true"></span>
                            <div className="wthree-field">
                                <input name="password" id="myInput" type="Password" placeholder="Password" value={user.pwd} onChange={pwdChange} onKeyUp={onKeyup}/>
                            </div>
                        </div>
                        <div className="wthree-field">
                            <button type="button" className="btn" onClick={login}>登录</button>
                        </div>
                        <ul className="list-login">
                            <li className="switch-agileits">
                                <label className="switch">
                                    <input type="checkbox" />
                                        <span className="slider round"></span>
                                        keep Logged in
                                </label>
                            </li>
                            <li>
                                <a href="#" className="text-right">forgot password?</a>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </section>
    )
}
export default Login